<template>
    <div class="address">
        <van-address-list
            v-model="chosenAddressId"
            :list="list"
            :disabled-list="disabledList"
            disabled-text="以下地址超出配送范围"
            default-tag-text="默认"
            @add="onAdd"
            @edit="onEdit"
        />
    </div>
</template>

<script>
import { Toast } from "vant"
export default {
    data() {
        return {
            chosenAddressId: '1',
            list: [],
            disabledList: [],
        };
    },
    created() {
        // 初始化
        this.init()
    },
    watch: {
        chosenAddressId() {
            this.$store.commit('address/setChosenAddressId', this.chosenAddressId)
        }
    },
    methods: {
        init() {
            this.getMyAddress()
        },
        getMyAddress() {
            this.$api.getAddress().then(res => {
                this.list = res.data.map(item => {
                    return {
                        ...item,
                        address: item.addressDetail
                    }
                })
                // 将接口获取到的列表放到vuex中
                // 怎么去调用vuex中的mutations
                this.$store.commit('address/setAddressList', this.list)
            })
        },
        onAdd() {
            this.$router.push('/address/new')

        },
        onEdit(item, index) {
            this.$router.push('/address/edit/' + item.id)
        },
    }
}
</script>

<style>
</style>